<template>
  <view class="load_box">
    <image
      v-if="props.isImage"
      class="cover"
      src="../../../static/images/common/no-more.svg"
      mode="widthFix"
    />

    <uni-load-more
      iconType="circle"
      :status="
        props.status == 1 ? 'more' : props.status == -1 ? 'no-more' : 'loading'
      "
      :contentText="text"
    />
  </view>
</template>

<!-- 加载状态组件 -->
<script lang="ts" setup>
import uniLoadMore from '@/components/common/uni-load-more/uni-load-more.vue'
import { ref, watch, type PropType } from 'vue'

//接受父組件參數
const props = defineProps({
  /**
   * 加载状态
   * 1 更多  0加载中  -1 没有更多 -2网络异常
   */
  status: {
    type: Number as PropType<1 | 0 | -1 | -2>,
    default: 1,
  },
  /**
   * 图片提示
   */
  isImage: {
    type: Boolean,
    default: true,
  },
})

watch(
  () => props.status,
  (newValue, olValue) => {
    if (newValue == -2) {
      text.value.contentnomore = '网络异常？下拉刷新'
    } else if (newValue != -1) {
      text.value.contentnomore = '暂时没有更多了~'
    }
  }
)

/**
 * 状态提示信息
 */
const text = ref({
  contentdown: '上拉加载更多~',
  contentrefresh: '正在加载...',
  contentnomore: '暂时没有更多了~',
})
</script>

<style scoped lang="scss">
.load_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20rpx;

  .cover {
    width: 60%;
  }
}
</style>
